CSS3 Responsive Mega Drop Down Menu   Documentation  by  thebestdesigns v8.0


CSS3 Responsive Mega Drop Down Menu

Created: 11/03/2015
By: thebestdesigns
Email: prince80946@gmail.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. Note:
  2. Features
  3. Files and structure
  4. General Markup
  5. Quick start
  6. jQuery script options explain
  7. HTML structure and guide
  8. Add the logo image and icon?
  9. How to use font awesome icons?
  10. How to make active link?
  11. How to create a multilevel drop down?
  12. How to create a full width drop down?
  13. How to create a tab bar drop down?
  14. 12 columns GRID structure
  15. How to change the menu colors?
  16. Contact Form Settings?
  17. Change logo
  18. Source and credits

Note:

For questions on basic HTML, Javascript or CSS editing - please give your question a quick Google or visit W3Schools as theme issues get top priorty. You will need some knowledge of HTML/CSS to edit the theme.


Features:


Files & Structure:

First of all this is CSS3 Responsive Mega Menu. Very easy implementaion and customization. This menu with predefined 30 color styles. All of the information within the main content area is nested within a div with an class of "mega-menu". To use this menu our website you just need to copy the html code + <head> section code which contains CSS or js files links in our html page and also put the four folders (css, fonts, js and imges) in our website public folder to use this menu. The general template structure is the same throughout the template. Here is the general structure.


General Markup:


Quick Start:

First attach the 3 main files in the head section of the html page.

<head>
    <!-- menu stylesheet file -- >
    <link href="css/mega_menu.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/mega_menu.min.js"></script>

</head>

mega_menu.css is main menu css file which contain the whole structure of the menu 
jquery-1.11.3.min.js is latest version of jquery which used for menu effects.
mega_menu.js is used for main menu script file.

minify versions of css and scripts also include with the .min.css, .min.js extension
minify versions faster then normal versions.

Also add the menu jQuery changeable options inside head section. Add this script block.

<script>
jQuery(document).ready(function ($) {
$('#menu-1').megaMenu({
// DESKTOP MODE SETTINGS
logo_align : 'left', // align the logo left or right. options (left) or (right)
links_align : 'left', // align the links left or right. options (left) or (right)
socialBar_align : 'left', // align the socialBar left or right. options (left) or (right)
searchBar_align : 'right', // align the search bar left or right. options (left) or (right)
trigger : 'hover', // show drop down using click or hover. options (hover) or (click)
effect : 'fade', // drop down effects. options (fade), (scale), (expand-top), (expand-bottom), (expand-left), (expand-right)
effect_speed : 400, // drop down show speed in milliseconds
sibling : true, // hide the others showing drop downs if this option true. this option works on if the trigger option is "click". options (true) or (false)
outside_click_close : true, // hide the showing drop downs when user click outside the menu. this option works if the trigger option is "click". options (true) or (false)
top_fixed : false, // fixed the menu top of the screen. options (true) or (false)
sticky_header : false, // menu fixed on top when scroll down down. options (true) or (false)
sticky_header_height: 200, // sticky header height top of the screen. activate sticky header when meet the height. option change the height in px value.
menu_position : 'horizontal', // change the menu position. options (horizontal), (vertical-left) or (vertical-right)
full_width : false, // make menu full width. options (true) or (false)
// MOBILE MODE SETTINGS
mobile_settings : {
collapse : false, // collapse the menu on click. options (true) or (false)
sibling : true, // hide the others showing drop downs when click on current drop down. options (true) or (false)
scrollBar : true, // enable the scroll bar. options (true) or (false)
scrollBar_height : 400, // scroll bar height in px value. this option works if the scrollBar option true.
top_fixed : false, // fixed menu top of the screen. options (true) or (false)
sticky_header : false, // menu fixed on top when scroll down down. options (true) or (false)
sticky_header_height: 200 // sticky header height top of the screen. activate sticky header when meet the height. option change the height in px value.
}
});
});
</script>


Define the options.

Note: if you only initialize the menu. use script like this.

('#menu-1') . This is unique ID of the menu. match with container id 

<script>
    jQuery(document).ready(function ($) {
        $('#menu-1').megaMenu({});
    });
</script>
<!-- menu start -->
<nav id="menu-1" class="mega-menu"></nav>
<!-- menu end -->

If you want second instance of the menu. just add the menu container unique ID. like (id="menu-2"). after that add the same id inside script block. here is the below expample. i change the (menu-1) id to (menu-2).

<script>
    jQuery(document).ready(function ($) {
        $('#menu-2').megaMenu({});
    });
</script>
<!-- menu start -->
<nav id="menu-2" class="mega-menu"></nav>
<!-- menu end -->

jQuery script options explain

logo_align: 'left' This option used for align the menu logo left or right side of the screen. Options (left) or (right).
links_align: 'left' This option used for align the menu link elements left or right side of the screen. Options (left) or (right).
socialBar_align: 'left' This option used for align the social bar icons left or right side of the screen. Options (left) or (right).
searchBar_align: 'right' This option used for align the search bar left or right side of the screen. Options (left) or (right).
trigger: 'hover' This option used for drop down. Showing drop down with mouse hover or mouse click. Options (hover) or (click).
effect: 'fade'
This option used for drop down animation effects. There are up to 6 effects. options (fade), (scale), (expand-top), (expand-bottom), (expand-left), (expand-right).
effect_speed: 400
This option used for showing drop down animation speed. Value in milliseconds.
sibling: true 
This option used for hide the others showing drop down instead of current drop down. This option works with click trigger. Options (true) or (false).
outside_click_close: true This option used for hide the showing drop downs when user click outside of the menu. like click on any other scree area. This option works with click trigger. Options (true) or (false).
top_fixed: false
This option fixed the menu always top of the screen. Options (true) or (false).
sticky_header: false 
This option fixed the menu top of the screen when user scroll down the screen top to bottom. Options (true) or (false).
sticky_header_height: 200 This option works if above option sticky_header:true. Activate sticky header when meet the height. Option change the height in px value.
menu_position: 'horizontal' This option used for change the menu position. Options (horizontal), (vertical-left) or (vertical-right).
full_width: false This option used for make the full width. Options (true) or (false).

Mobile settings

collapse: false
This option used for collapse the menu and show the hamburger icon or click on icon to show the menu bar. Options (true) or (false).
sibling: true
This option used for hide the others showing drop down instead of current drop down. This option works with click trigger. Options (true) or (false).
scrollBar: true
This option used for enable the scroll bar. This option stop the drop downs showing long height. Options (true) or (false).
scrollBar_height: 400
This is scroll bar max height in px unit. Drop downs stop to show long when meet the height. Options in integer value.
top_fixed: false
This option fixed the menu always top of the screen. Options (true) or (false).
sticky_header: false
This option fixed the menu top of the screen when user scroll down the screen top to bottom. Options (true) or (false).
sticky_header_height: 200
This option works if above option sticky_header:true. Activate sticky header when meet the height. Option change the height in px value.

HTML STRUCTURE AND GUIDE

Create a menu container.With unique ID or class mega-menu

<!-- menu start -->
<nav id="menu-1" class="mega-menu">
<!-- content -->
</nav>
<!-- menu end -->

Create a menu top links elements.

<!-- menu start -->
<nav id="menu-1" class="mega-menu">
<!-- menu list items container -->
<section class="menu-list-items">
<!-- menu logo -->
<ul class="menu-logo"></ul>
<!-- menu links -->
<ul class="menu-links">
<!-- active class -->
<li class="active"><a href="#"> <i class="fa fa-home"></i> Active</a></li>
<li><a href="#">Drop Down <i class="fa fa-angle-down fa-indicator"></i></a></li>
<li><a href="#">Mega Menu <i class="fa fa-angle-down fa-indicator"></i></a></li>
<li><a href="#">Grid <i class="fa fa-angle-down fa-indicator"></i></a></li>
<li><a href="#">Tab Bar <i class="fa fa-angle-down fa-indicator"></i></a></li>
<li><a href="#">Images <i class="fa fa-angle-down fa-indicator"></i></a></li>
<li><a href="#">Contact <i class="fa fa-angle-down fa-indicator"></i></a></li>
</ul>
<!-- menu social bar -->
<ul class="menu-social-bar"></ul>
<!-- menu search bar -->
<ul class="menu-search-bar"></ul>
</section>
</nav>
<!-- menu end -->


Add the logo image and icon?

add the icon

<i class="fa fa-circle-o-notch"></i>

add the image

<img src="images/ufo.png" alt="logo">

<!-- menu logo -->
<ul class="menu-logo">
<li>
<a href="#"> <i class="fa fa-circle-o-notch"></i> Company Logo
<!--<img src="images/ufo.png" alt="logo">--> </a>
</li>
</ul>

How to used font awesome icons?

<i class="fa fa-angle-down"></i>

Source: http://fortawesome.github.io/Font-Awesome/icons/

If you align the icons right side. you must add class "fa-indicator"

<i class="fa fa-angle-down fa-indicator"></i>


How to make active link?

add the active class on current li elements.
<li class="active"> <!-- content--> </li>
<ul class="menu-links">
<!-- active class -->
<li class="active"><a href="#"> <i class="fa fa-home"></i> Active</a></li>
<li><a href="#">Drop Down <i class="fa fa-angle-down fa-indicator"></i></a></li>
<li><a href="#">Mega Menu <i class="fa fa-angle-down fa-indicator"></i></a></li>
<li><a href="#">Grid <i class="fa fa-angle-down fa-indicator"></i></a></li>
<li><a href="#">Tab Bar <i class="fa fa-angle-down fa-indicator"></i></a></li>
<li><a href="#">Images <i class="fa fa-angle-down fa-indicator"></i></a></li>
<li><a href="#">Contact <i class="fa fa-angle-down fa-indicator"></i></a></li>
</ul>


How to create a multilevel drop down?

Here is the drop down structure.
<!-- drop down second 
<ul class="drop-down-multilevel">
<!-- content -->
</ul>
If you align the drop down left side. add class "left-side"
<!-- drop down left side --> <!-- add class left-side -->
<ul class="drop-down-multilevel left-side">
<!-- content -->
</ul>
<!-- drop down multilevel  -->
<ul class="drop-down-multilevel">
<li><a href="#">Items Right Side <i class="fa fa-angle-right fa-indicator"></i> </a>

<!-- drop down second level -->
<ul class="drop-down-multilevel">
<!-- content -->
</ul>

</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Items Left Side <i class="fa fa-angle-left fa-indicator"></i> </a>

<!-- drop down left side --> <!-- add class left-side -->
<ul class="drop-down-multilevel left-side">
<!-- content -->
</ul>

</li>
<li><a href="#">Item 4</a></li>
</ul>



How to create a Full width drop down?

If you want to create a full width drop down. you must add this class ( grid-col-12 )
<!-- drop down full width -->
<div class="drop-down grid-col-12">
<!-- content -->
</div>



List items HTML structure
<h4>List Items</h4>
<ul>
<li><a href="#"> NetTuts </a></li>
<li><a href="#"> VectorTuts </a></li>
<li><a href="#"> PsdTuts </a></li>
<li><a href="#"> PhotoTuts </a></li>
<li><a href="#"> ActiveTuts </a></li>
<li><a href="#"> Creattica </a></li>
</ul>
List items with description HTML structure
<h4>List + Description</h4>
<ul>
<li class="list-description"><a href="#"> ThemeForest <span>Description</span> </a></li>
<li class="list-description"><a href="#"> GraphicRiver <span>Description</span> </a></li>
<li class="list-description"><a href="#"> ActiveDen <span>Description</span> </a></li>
<li class="list-description"><a href="#"> VideoHive <span>Description</span> </a></li>
</ul>
Images with description HTML structure
<h4>Images + Description</h4>
<ul>
<li class="image-description"><a href="#"> <img src="images/icons/brush_64px.png" alt="list images"> ThemeForest <span>Description</span> </a></li>
<li class="image-description"><a href="#"> <img src="images/icons/palette_2_64px.png" alt="list images"> GraphicRiver <span>Description</span> </a></li>
<li class="image-description"><a href="#"> <img src="images/icons/palette_64px.png" alt="list images"> ActiveDen <span>Description</span> </a></li>
</ul>
List items with icons HTML structure
<h4>List With Icons</h4>
<ul>
<li><a href="#"> <i class="fa fa-leaf"></i> Design </a></li>
<li><a href="#"> <i class="fa fa-pie-chart"></i> Logo </a></li>
<li><a href="#"> <i class="fa fa-foursquare"></i> Flash </a></li>
<li><a href="#"> <i class="fa fa-flash"></i> Illustration </a></li>
</ul>


How to create a tab-bar drop down?

Tab bar drop down html structure

<!-- drop down tab bar -->
<ul class="drop-down-tab-bar"></ul>
<!-- drop down full width -->
<ul class="drop-down-tab-bar grid-col-12">
<li><a href="#"> <i class="fa fa-tags"></i> Tab Bar <i class="fa fa-angle-right fa-indicator"></i> </a></li>
<li><a href="#">Motion Graphics<i class="fa fa-angle-right fa-indicator"></i> </a></li>
<li><a href="#">Game Development<i class="fa fa-angle-right fa-indicator"></i> </a></li>
<li><a href="#">Business<i class="fa fa-angle-right fa-indicator"></i> </a></li>
<li><a href="#">Illustration<i class="fa fa-angle-right fa-indicator"></i> </a></li>
<li><a href="#">Web Design<i class="fa fa-angle-right fa-indicator"></i> </a></li>
<li><a href="#">Mac Computer Skills<i class="fa fa-angle-right fa-indicator"></i> </a></li>
</ul>



12 columns GRID structure



Grid relative classes

sapce-0 This class used for remove the div or any other elements padding or margin.
offset-1,
offset-2,
offset-3,
offset-4,
offset-5
These classes used for shift the drop down slightly left side of the screen.

HTML structure
<!-- drop down with grid column 6 + offset-3 -->
<div class="drop-down grid-col-6 offset-3">
<!-- content -->
</div>
CSS structure
.offset-1 { margin-left : 100px; }
.offset-2 { margin-left : -150px; }
.offset-3 { margin-left : -200px; }
.offset-4 { margin-left : -250px; }
.offset-5 { margin-left : -300px; }


 Social bar HTML structure

<!-- menu social bar -->
<ul class="menu-social-bar">
<li data-color="blue"><a href="#"><i class="fa fa-facebook-square"></i></a></li>
<li data-color="sky-blue"><a href="#"><i class="fa fa-twitter-square"></i></a></li>
<li data-color="orange"><a href="#"><i class="fa fa-google-plus-square"></i></a></li>
<li data-color="red"><a href="#"><i class="fa fa-pinterest-square"></i></a></li>
</ul>

Search bar HTML structure

<!-- menu search bar -->
<ul class="menu-search-bar">
<li>
<form method="post" action="#">
<label>
<input name="menu_search_bar" placeholder="Search" type="search">
<i class="fa fa-search"></i>
</label>
</form>
</li>
</ul>


Position vertical-left or right relative classes.


offset-1-vertical
offset-2-vertical
offset-3-vertical
offset-4-vertical
offset-5-vertical
These classes used for slightly shift the drop down bottom to top of the screen. when menu on position (vertical-left) or (vertical-right).

HTML structure
<div class="drop-down grid-col-6 offset-5-vertical"><!-- content --></div>
CSS structure
.offset-1-vertical { margin-top : -100px !important; }
.offset-2-vertical { margin-top : -150px !important; }
.offset-3-vertical { margin-top : -200px !important; }
.offset-4-vertical { margin-top : -250px !important; }
.offset-5-vertical { margin-top : -300px !important; }


How to change the menu colors?

This menu has 30 predefined colors. If you want to change the menu color. You may need to add the data-color="" HTML attribute in menu container.

Example  for changing grey menu color.
data-color="grey">
<nav id="menu-1" class="mega-menu" data-color="grey">
<!--content-->
</nav>

data-color="blue-grey"
data-color="blue-grey-invert"
data-color="brown"
data-color="brown-invert"
data-color="cyan"
data-color="cyan-invert"
data-color="deep-orange"
data-color="deep-orange-invert"
data-color="deep-purple"
data-color="deep-purple-invert"
data-color="grey"
data-color="grey-invert"
data-color="indigo"
data-color="indigo-invert"
data-color="light-blue"
data-color="light-blue-invert"
data-color="light-green"
data-color="light-green-invert"
data-color="lime"
data-color="lime-invert"
data-color="orange"
data-color="orange-invert"
data-color="pink"
data-color="pink-invert"
data-color="purple"
data-color="purple-invert"
data-color="red"
data-color="red-invert"
data-color="teal"
data-color="teal-invert"



Contact Form Settings?

Open the nav-form.php file and change the email with your email (where you want to received the emails form others users). Example change this email (example@gmail.com) to (your@gmail.com);




Change log:

version 1.0

version 2.0

version 3.0

version 4.0

version 5.0

version 6.0

version 7.0

version 8.0


  

Sources and Credits:


Once again, thank you so much for purchasing this item. That's it! Enjoy your file and don't forget to rate it! If you want to rate it with less than 5 stars, please let me know first what's the problem with the file and how can I improve it for you. Have a good day! :).

thebestdesigns

Go To Table of Contents